<template>
    <div class="h100">
      <app-head :title="title"></app-head>
      <div >
          <div class="top">
             <div style="position: relative;top: 60px;">
               <div class="head">
                 <img :src="datas.headImg" alt="">
               </div>
               <dl class="font-fff" style="font-size: 20px;font-weight: bold;margin: 10px 0">{{datas.name}}</dl>
               <dl class="font-fff" style="font-size: 13px">id:{{datas.id}}</dl>
             </div>
          </div>
        <div class="bottom">
           <div class="info ">
              <dl>
                <dt>{{datas.experValue}}
                  <dd>经验值</dd>
                </dt>

              </dl>
             <dl>
               <dt>{{datas.integralValue}}
               <dd>积分</dd>
               </dt>
             </dl>
           </div>
          <div class="tel">
          {{datas.telphone}}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "Myself",
      components:{
        AppHead
      },

        data () {
          return {
            title: '个人中心',
            datas:{}
          }
        },
      mounted:function () {
        this.init()
      },
      methods:{
          init:function () {
            var that = this
            this.$http({
              method: 'get',
              url: '/user/getuser',
              // params:{
              //   id:that.$route.query.id
              // }
            }).then(function (res) {


            that.datas = res.data.datas[0]
              console.log(res.data.datas)
            }).catch(function (error) {

            })
          }
      }
    }
</script>

<style scoped lang="less">
  dd{
    padding-left: 0;
    margin-left: 0;
  }
  .top{
    height: 350px;
    background: #fff url("../assets/images/bg1.png") no-repeat center;
    .head{
      width: 80px;
      height: 80px;
      border: 3px solid #fff;
      border-radius: 50%;
      margin:  0 auto;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    dl{
      padding: 0;
      margin: 0;

    }
  }
  .info{

    padding: 36px 0;
    dl{
      width: 45%;
      display: inline-block;
      vertical-align: middle;
    }
    dt{
      font-size:22px;

      font-weight:500;
      color:rgba(74,144,226,1);
    }
    dd{
      font-size:13px;

      font-weight:400;
      color:rgba(153,153,153,1);
    }
  }
  .bottom{
    background: #fff;
  }
  .tel{
    height: 25px;
    font-size: 15px;
    color: #333;
    text-align: left;
    line-height: 25px;
    padding-left: 14%;
    background: url('../assets/images/icon_1.png') no-repeat 6% ;
  }
</style>
